<template>
  <div>
    <div id="parent">
    <div id="login_left">
        <div>扫描二维码登录</div>
            <img src="@/public/login/img.jpg" alt="" style="display:block;">
        <div>
            请使用<a href="">cakcake客户端</a>
            <br>
            扫码登录或扫描下载APP
        </div>
    </div>
    <div>
      <div>
     </div>
    </div>
    <div id="login">
    <div id="login_top">
            <h3>账号注册</h3>
            <div></div> 
    </div>
    <br> 
    <div id="login_input">
        <div>
   <label>账号：</label>
    <input type="text" id="username" placeholder="请输入账号"> </div>
    <div id="usernameMsg" class="msg"></div>
    <br>
    <label>密码：</label>
    <input type="password" id="password" placeholder="请输入密码" >
    <div id="passwordMsg" class="msg"></div>
    <br>
    <label>确认密码：</label>
    <input type="password" id="password2" placeholder="请再次输入密码">
    <div id="password2Msg" class="msg"></div>
    <br>
    <label>验证码：</label>
    <input type="text" id="code" placeholder="请输入验证码">
    <button id="codeBtn">获取验证码</button>
    <br>
</div>
    <br>
    <button @click="getUser()" id="register">注册</button><br>
    
    </div>
    <div id="img">
       <img id="img_left" src="@/public/login/left_t.png" alt="">
        <img id="img_right" src="@/public/login/right_t.png" alt=""> 
    </div>
</div>
  </div>
</template>

<script>
import $ from '@/jquery-1.12.4'
export default {
  data(){
    return {
        User:{
        name:'',
        password:'',     
    }}
  },
  components:{
  },
  methods:{
    getUser(){
    this.User.name=$('#username').val();
    this.User.password=$('#password').val();
    console.log($('#password').val()==$('#password2').val());
    console.log($('#username').val()!=null);
    console.log($('#password').val()!='');
    console.log($('#password2').val()!='');
    if($('#password').val()==$('#password2').val()&&$('#username').val()!=null&&$('#password').val()!=''&&$('#password2').val()!=''){

    let userStr=localStorage.getItem('Userdata');//获取浏览器中用户注册数据
    let arrUserStr=userStr.split('*');//分割为数组
    console.log(arrUserStr.length);
    let flag=true;
    for(let item in arrUserStr){
    console.log(JSON.parse(arrUserStr[item]).name)   
    if(JSON.parse(arrUserStr[item]).name==this.User.name){
    flag=false;
    console.log(localStorage.getItem('Userdata'))    
    alert('用户名重复！')
    break; 
    }else{ 
    }     
    }
    if(flag){
        localStorage.setItem('Userdata',userStr+'*'+JSON.stringify(this.User))//追加数据
        localStorage.setItem(this.User.name,'购物车为空');
        console.log(localStorage.getItem(this.User.name))
    alert('注册成功')
        this.$router.push('/login')    
    }
    }else{
        alert('用户名或密码不符合要求！')    
    }
    }
  },
  mounted(){
    var flag=false;
    function change_img(){
        if(flag){
            flag=false;
            document.getElementById('img_left').src=require('@/public/login/left_t.png')
            document.getElementById('img_right').src=require('@/public/login/right_t.png')
        }else{
            flag=true;
            document.getElementById('img_left').src=require('@/public/login/left_f.png')
            document.getElementById('img_right').src=require('@/public/login/right_f.png')
        }
    }
//1.当用户名的输入框失焦时，对用户名进行非空验证：
    //如果为空则输入框边框变红，且在usernameMsg中显示“用户名不能为空”
    //输入用户名后，边框恢复为黑色
    var ele=document.querySelector('#username');
    ele.addEventListener('focus',function(){      
            console.log(ele.value)
            if(!ele.value){
                document.querySelector('#usernameMsg').innerHTML='';
            }
    })
    ele.addEventListener('blur',function(){
            if(!ele.value){
            document.getElementById('usernameMsg').innerHTML='用户名不能为空';
                ele.style.borderBottom='solid 1px red';
            }else{
                ele.style.border=''
            }
        });
    //2.当密码输入框失焦时，先验证密码是否为空，如果为空则在passwordMsg中显示“密码不能为空”，且输入框边框变红
    //如果不为空，则验证长度是否少于6位，如果少于6位，则在passwordMsg中显示“密码长度不能少于6位”，且输入框边框变红
   var password=document.getElementById('password');
   var text=document.getElementById('passwordMsg');
   password.addEventListener('blur',function(){change_img(true);
    
    if(password.value==''){
        password.style.borderBottom='solid 1px red';
        text.innerHTML='密码不能为空'
        console.log(document.querySelectorAll('.msg'))
    }else{
        console.log(password.value.length)
        if(password.value.length<6){ 
            password.style.borderBottom='solid 1px red';
            text.innerHTML='密码长度不能少于6位'
        }else{
            text.innerHTML=''
        }
    }
   })
   password.addEventListener('focus',function(){change_img(true);      
            if(!password.value){
                document.querySelector('#passwordMsg').innerText=null;
            }
    })
    //3.当确认密码框失焦时，验证两次输入的密码是否一致，如果不一致，则提示两次输入的密码不一致，且确认密码的边框变红
    var password2=document.getElementById('password2');
    var text2=document.getElementById('password2Msg');
    password2.addEventListener('blur',function(){
    if(password.value!=password2.value){
        text2.innerHTML='密码不一致'
        password2.style.borderBottom='solid 1px red'
    }else{
        text2.innerHTML=''
        password2.style.border=''
    }
   })
    //5.点击“获取验证码”，按钮里面的文字变成60秒倒计时并禁用，时间到时按钮里面的文字变成“获取验证码”并可点击
    var get=document.querySelector('#codeBtn');
        get.addEventListener('click',function(){
            let s=3; 
            get.innerHTML=s; 
            var button_interval=setInterval(function(){
                get.innerHTML=--s;
                if(s==0){
                    clearInterval(button_interval);
                    get.innerText='获取验证码'
                    get.disabled=false;
                }
            },1000) 
            get.disabled=true;
        })
  }
}   
</script>

<style lang="scss" scoped>
  @import "../../assets/common.scss";
 body{
        margin:0;
        display:flex;
        justify-content:center;
    }
    input{
        background:none;  
        outline:none;  
        border:none;
    }
    #parent{
        margin-top: -2.3rem;
        display:flex;
        justify-content:center;
    }
    #login_left{
        flex-direction:column;
        display:flex;
        justify-content:space-around;
        align-items:center;
    }
    #login_left+div{
        width: 20px;
    }
    #login_left img{
        width: 160px;
        height: 160px;
        margin:0 40px 30px 0;
        margin-right:1px;
    }
    #login_left>div{
        width: 100%;
        height: 16px;
        margin-bottom:26px;
        text-align:center;
    }
    #login_left+div{
        width: 40px;
        height: 322px;
        flex-direction:row;
        align-items:center;
    }
    #login_left+div div{
        width: 38%;
        height: 80%;
        margin-top:7px;
        border-right:1px  solid #442818;
    }
    #login_left a{
        text-decoration:none;
        color:#442818;
    }
    #login{
        z-index: 10;
        background-color: $undercolor;
        /* border-radius: 2%; */
        box-shadow:1px 1px 10px 1px  $undercolor;
    }
    
    .msg {
        color: red;
        font-size: 12px;
        font-weight: bold;
        margin-left: 10px;
    }
    #img{
        width: 100%;
        position: absolute;
        bottom: 0   ;
        display:flex;
        justify-content:space-between;
        z-index:-1;
    }
    #img img{
        width: 300px;
    }
    #login_top{
        display:flex;
        justify-content:space-around;
        width: 46%;
        margin-left:27%;
        margin-bottom:5%;
        margin-top:2%;
    }
    #login_top h3{
        
        display:inline-block;
        flex-direction:column;
        color:#442818;
        margin-left:40px;
    }
    #login_top div{
        margin:0 5px;
        width: 1px;
        height: 24px;
        background-color:rgb(227, 229, 231);
    }
    #userImg{
        float:right;
    }
    #login input{
        border-bottom:1px solid #442818;
        padding:12px 20px;
    }
    #login div{
        display:inline-block;
    }
    #usernameMsg,#passwordMsg,#password2Msg{
        margin:-90px;
    }
    label{
        margin:10px;
    }
    #codeBtn{
        border:none;
        background:#442818;
        color:white;  
        border-radius: 5px;
    }
    #login_input{
        display:flex;                               
        flex-direction:column;
        justify-content:center;
        align-items: flex-end;
    }
    #register{
        background-color:$undercolor;
        border:none;
        width:60%;
        height: 10%;
        /* text-align:center; */
        border-radius:5px;
        font-size:16px;
        color:white;
        margin:10% 0 0 20%;
        box-shadow:0.1px 0.1px 5px rgb(0, 0, 0);
    }
</style>@/jquery-1.12.4